import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { TabBar } from 'antd-mobile';
import Contact from './contact';
import Friend from './friend';
import socket from 'utils/socket';
import * as chatActions from 'actions/chat';

@connect(state => ({
    user: state.login.user,
    msgs: state.chat.msgs
}), dispatch => ({
    chatActions: bindActionCreators(chatActions, dispatch)
}))
export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: localStorage.getItem('tab') || 'message'
        }
    }
    
    onPress(selected) {
        this.setState({
            selected
        }, () => {
            localStorage.setItem('tab', selected);
        })
    }
    render() {
        const { selected } = this.state;
        return (
            <div>
                <TabBar>
                    <TabBar.Item
                        title='消息'
                        key='message'
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat' }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat' }}
                            />
                        }
                        selected={selected === 'message'}
                        onPress={this.onPress.bind(this, 'message')}
                    >
                        <Contact />
                    </TabBar.Item>
                    <TabBar.Item
                        title='好友'
                        key='contacts'
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat' }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat' }}
                            />
                        }
                        selected={selected === 'contacts'}
                        onPress={this.onPress.bind(this, 'contacts')}
                    >
                        <Friend />
                    </TabBar.Item>
                    {/* <TabBar.Item
                        title='动态'
                        key='dynamic'
                        icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
                        selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
                        selected={selected === 'dynamic'}
                        onPress={this.onPress.bind(this, 'dynamic')}
                    >
                        <div></div>
                    </TabBar.Item> */}
                </TabBar>
            </div>
        )
    }
}